<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2023-11-09 11:42:09
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-11-18 14:55:51
 * @FilePath: \hy-ui\src\views\app\appInfo\components\detail\pageModel\components\dataConfigModel.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="dataConfigModel">
    <el-dialog
      title="数据转换配置"
      :visible.sync="dataConfigOpen"
      width="70%"
      :before-close="dataConfigClose"
    >
      <div>
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="数据转换方式">
            <el-select
              v-model="form.type"
              :popper-append-to-body="false"
              popper-class="selectClass"
              style="width: 100%"
              disabled
            >
              <el-option
                v-for="item in dict.type.pt_app_form_column_type"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="日期时间格式化" v-if="form.type === 'date'">
            <el-select
              v-model="form.dateType"
              :popper-append-to-body="false"
              popper-class="selectClass"
              style="width: 100%"
            >
              <el-option
                v-for="item in dict.type.pt_app_page_date_type"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="数据字典" v-if="form.type === 'dic'">
            <div @click="handleOpenDictList">
              <el-input
                v-model="form.dict"
                placeholder="请选择数据字典"
                readonly
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="接口" v-if="form.type === 'custom'">
            <el-select
              v-model="form.customParams"
              filterable
              value-key="id"
              popper-class="selectClass"
              style="width: 100%"
            >
              <el-option
                v-for="(item, idx) in data"
                :key="idx"
                :label="item.name"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="逻辑" v-if="form.type === 'customLogic'">
            <codeEdit
              :modelValue="form.optJs"
              @editSetvalue="editSetvalue"
              mode="javascript"
              theme="idea"
            ></codeEdit>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dataConfigClose">取 消</el-button>
        <el-button type="primary" @click="handleDataConfigSum(form)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <dictList
      v-if="dictListOpen"
      :open="dictListOpen"
      :beforeClose="() => (dictListOpen = false)"
      :appId="appId"
      :handleDictSure="handleDictSure"
    />
  </div>
</template>

<script>
import dictList from "./dictList.vue";
import { list } from "@/api/system/customInterface";
import codeEdit from "@/components/codeEdit";
export default {
  name: "HyUiDataConfigModel",
  components: {
    dictList,
    codeEdit
  },
  dicts: ["pt_app_form_column_type", "pt_app_page_date_type"],
  props: {
    dataConfigOpen: {
      type: Boolean,
      default: false,
    },
    dataConfigClose: {
      type: Function,
      default: () => {},
    },
    rowData: {
      type: Object,
      default: () => {},
    },
    appId: {
      type: String,
      default: "",
    },
    handleDataConfigSum: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      form: {},
      dictListOpen: false,
      data: [],
    };
  },

  async mounted() {
    this.form.type = this.rowData.type;
    if (this.form.type === "date") {
      this.form = { ...this.form, dateType: this.rowData.format };
    }
    if (this.form.type === "dic") {
      this.form = {
        ...this.form,
        dict: this.rowData.formatName,
        dictObj: {
          dictType: this.rowData.format,
          activeName: this.rowData.formatType,
        },
      };
    }
    if (this.form.type === "custom") {
      const res = await list({ pageNum: 1, pageSize: 999 });
      if (res.code === 200) {
        this.data = res.rows;
      }
      this.form = {
        ...this.form,
        customParams: JSON.parse(this.rowData.format) || {},
      };
    }
    if (this.form.type === "customLogic") {
      this.form = { ...this.form, optJs: this.rowData.format };
    }
  },

  methods: {
    handleOpenDictList() {
      this.dictListOpen = true;
    },
    editSetvalue(value) {
      this.form.optJs = value;
    },
    handleDictSure(value, activeName) {
      if (!value) return this.$message.error("请选择数据字典");
      this.form.dictObj = { ...value, activeName };
      this.form.dict = value.dictName;
      this.dictListOpen = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.dataConfigModel {
}
</style>